<template>
  <div>
    <div style="margin-bottom: 5px;">
      <el-button type="primary" @click="add">发布问卷</el-button>
      <el-button type="success" @click="mine">我的问卷</el-button>
    </div>
    <el-table :data="tableData"
              :header-cell-style="{ background: '#f2f5fc', color: '#555555' }"

    >

      <el-table-column prop="id" v-if="false">
      </el-table-column>
      <el-table-column prop="testStatus" label="" width="65">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.projectStatus === 0 ? 'info' : 'success'"
              disable-transitions>{{scope.row.projectStatus === 0 ? '锁定' : '正常'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="300" :formatter="titleFormat">
      </el-table-column>
      <el-table-column prop="userName" label="发布者" width="150">
      </el-table-column>
      <el-table-column prop="createTime" label="发布时间" width="150">
      </el-table-column>
      <el-table-column prop="operate" label="">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="answer(scope.row)">作答</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20,30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <el-dialog
        title="测验内容"
        :visible.sync="centerDialogVisible"
        width="70%"
        center>

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-col :span="20">
            <el-input type="textarea" autosize
                      v-model="form.title"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="发布者" prop="userName">
          <el-col :span="20">
            <el-input v-model="form.userName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="发布时间" prop="createTime">
          <el-col :span="20">
            <el-input v-model="form.createTime"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="addQuestion" size="medium">添加题目</el-button>
      <el-table :data="questionData">
        <el-table-column property="questionText" label="题目" width="150"></el-table-column>
        <el-table-column property="atext" label="A" width="60"></el-table-column>
        <el-table-column property="btext" label="B" width="60"></el-table-column>
        <el-table-column property="ctext" label="C" width="60"></el-table-column>
        <el-table-column property="dtext" label="D" width="60"></el-table-column>
        <el-table-column prop="answer" label="答案" width="60">
          <template slot-scope="scope">
            <el-tag
                disable-transitions>{{scope.row.answer === 1 ? 'A' :
                (scope.row.answer === 2 ? 'B' : (scope.row.answer === 3 ? 'C' : 'D'))}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column property="points" label="分数" width="60"></el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange3"
          @current-change="handleCurrentChange3"
          :current-page="quesNum"
          :page-sizes="[5, 10]"
          :page-size="quesSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="quesTotal">
      </el-pagination>



      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">返 回</el-button>
        <el-button @click="doMod">保 存</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="发布测验"
        :visible.sync="centerDialogVisible2"
        width="80%"
        center>

      <el-form ref="addForm" :model="addForm" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-col :span="20">
            <el-input type="textarea" autosize
                      v-model="addForm.title" ></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible2 = false">返  回</el-button>
        <el-button @click="doSave">发  布</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="我发布的测验"
        :visible.sync="centerDialogVisible3"
        width="80%"
        center>

      <el-table :data="mineData"
                :header-cell-style="{ background: '#f2f5fc', color: '#555555' }"

      >

        <el-table-column prop="id" v-if="false">
        </el-table-column>
        <el-table-column prop="testStatus" label="" width="65">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.projectStatus === 0 ? 'info' : 'success'"
                disable-transitions>{{scope.row.projectStatus === 0 ? '锁定' : '正常'}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="300" :formatter="titleFormat">
        </el-table-column>
        <el-table-column prop="createTime" label="发布时间" width="150">
        </el-table-column>
        <el-table-column prop="operate" label="">
          <template slot-scope="scope">
            <el-button size="small" type="success" @click="editMine(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="mineNum"
          :page-sizes="[5, 10, 20,30]"
          :page-size="mineSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="mineTotal">
      </el-pagination>
    </el-dialog>

    <el-dialog
        title="添加问题"
        :visible.sync="centerDialogVisible5"
        width="70%"
        center>

      <el-form ref="questionForm" :model="questionForm" label-width="80px">
        <el-form-item label="问题" prop="questionText">
          <el-col :span="20">
            <el-input type="textarea" autosize
                      v-model="questionForm.questionText"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="A选项" prop="aText">
          <el-col :span="20">
            <el-input type="textarea" autosize
                      v-model="questionForm.atext"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="B选项" prop="bText">
          <el-col :span="20">
            <el-input type="textarea" autosize
                      v-model="questionForm.btext"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="C选项" prop="cText">
          <el-col :span="20">
            <el-input type="textarea" autosize
                      v-model="questionForm.ctext"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="D选项" prop="dText">
          <el-col :span="20">
            <el-input type="textarea" autosize
                      v-model="questionForm.dtext"></el-input>
          </el-col>
        </el-form-item>
          <el-form-item label="答案">
            <el-radio-group v-model="questionForm.answer">
              <el-radio label="1">A</el-radio>
              <el-radio label="2">B</el-radio>
              <el-radio label="3">C</el-radio>
              <el-radio label="4">D</el-radio>
            </el-radio-group>
          </el-form-item>
        <el-form-item label="分数" prop="points">
          <el-col :span="20">
            <el-input type="textarea" autosize
                      v-model="questionForm.points"></el-input>
          </el-col>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible5 = false">返  回</el-button>
        <el-button @click="questionSave">发  布</el-button>
      </span>
    </el-dialog>

    <el-dialog
        title="测验内容"
        :visible.sync="centerDialogVisible"
        width="70%"
        center>

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-col :span="20">
            <el-input type="textarea" autosize
                      v-model="form.title"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="发布者" prop="userName">
          <el-col :span="20">
            <el-input v-model="form.userName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="发布时间" prop="createTime">
          <el-col :span="20">
            <el-input v-model="form.createTime"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="addQuestion" size="medium">添加题目</el-button>
      <el-table :data="questionData">
        <el-table-column property="questionText" label="题目" width="150"></el-table-column>
        <el-table-column property="atext" label="A" width="60"></el-table-column>
        <el-table-column property="btext" label="B" width="60"></el-table-column>
        <el-table-column property="ctext" label="C" width="60"></el-table-column>
        <el-table-column property="dtext" label="D" width="60"></el-table-column>
        <el-table-column prop="answer" label="答案" width="60">
          <template slot-scope="scope">
            <el-tag
                disable-transitions>{{scope.row.answer === 1 ? 'A' :
                (scope.row.answer === 2 ? 'B' : (scope.row.answer === 3 ? 'C' : 'D'))}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column property="points" label="分数" width="60"></el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange3"
          @current-change="handleCurrentChange3"
          :current-page="quesNum"
          :page-sizes="[5, 10]"
          :page-size="quesSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="quesTotal">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">返 回</el-button>
        <el-button @click="doMod">保 存</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="作答"
        :visible.sync="centerDialogVisible6"
        width="70%"
        center>

      <el-table :data="questionData">
        <el-table-column property="questionText" label="题目" width="150"></el-table-column>
        <el-table-column property="atext" label="A" width="60"></el-table-column>
        <el-table-column property="btext" label="B" width="60"></el-table-column>
        <el-table-column property="ctext" label="C" width="60"></el-table-column>
        <el-table-column property="dtext" label="D" width="60"></el-table-column>
        <el-table-column prop="operate" label="">
          <template slot-scope="scope">
            <el-button size="small" type="success" @click="answer2(scope.row)">回答</el-button>
            </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible6 = false">返 回</el-button>
        <el-button @click="result">提 交</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="回答问题"
        :visible.sync="centerDialogVisible7"
        width="30%"
        center>

      <el-form ref="answerForm" :rules="rules" :model="answerForm" label-width="80px">
        <el-form-item label="选择答案">
          <el-radio-group v-model="choose">
            <el-radio label="1">A</el-radio>
            <el-radio label="2">B</el-radio>
            <el-radio label="3">C</el-radio>
            <el-radio label="4">D</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible7 = false">取 消</el-button>
    <el-button type="primary" @click="ifCorrect">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      times:'',
      user:{},
      tableData: [],
      mineData:[],
      questionData:[],
      testId:'',
      pageSize:10,
      pageNum:1,
      total:0,
      mineSize:10,
      mineNum:1,
      mineTotal:0,
      quesSize:5,
      quesNum:1,
      quesTotal:0,
      choose:'',
      sum:0,
      marks:0,
      centerDialogVisible:false,
      centerDialogVisible2:false,
      centerDialogVisible3:false,
      centerDialogVisible4:false,
      centerDialogVisible5:false,
      centerDialogVisible6:false,
      centerDialogVisible7:false,
      form:{
        id:'',
        title:'',
        userName:'',
        createTime:'',
        testStatus: ''
      },
      addForm:{
        id:'',
        creatorId:'',
        title:'',
        createTime:'',
        testStatus: '1'
      },
      questionForm:{
        id:'',
        testId:'',
        questionText:'',
        atext:'',
        btext:'',
        ctext:'',
        dtext:'',
        answer:'',
        points:''
      },
      answerForm:{
        answer:''
      },
      rules: {

      }
    }
  },
  methods:{
    init(){
      this.user = JSON.parse(sessionStorage.getItem('CurUser'))
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    resetAddForm() {
      this.$refs.addForm.resetFields();
    },
    resetQuestionForm() {
      this.$refs.questionForm.resetFields();
    },
    resetAnswerForm() {
      this.$refs.answerForm.resetFields();
    },

    titleFormat(row, column, cellValue) {
      if (!cellValue) return "";
      if (cellValue.length > 20) {
        //最长固定显示4个字符
        return cellValue.slice(0, 20) + "......";
      }
      return cellValue;
    },
    editMine(row){
        console.log(row)
        this.testId = row.id
        this.centerDialogVisible = true
        this.loadQuestion()
        this.$nextTick(()=>{
          //赋值到表单
          this.form.id = row.id
          this.form.title = row.title
          this.form.userName = row.userName
          this.form.createTime = row.createTime
          this.form.testStatus = row.testStatus
        })
    },
    answer(row){
      this.marks = 0
      this.sum = 0
      console.log(row)
      this.testId = row.id
      this.centerDialogVisible6 = true
      this.loadQuestion()
    },
    answer2(row){
      this.choose = ''
      console.log(row)
      this.sum = this.sum + row.points
      this.centerDialogVisible7 = true
      this.$nextTick(()=>{
        this.resetAnswerForm()
      })
    },
    add(){
      this.centerDialogVisible2 = true
      this.$nextTick(()=>{
        this.resetAddForm()
      })
    },
    addQuestion(){
      this.centerDialogVisible5 = true
      this.$nextTick(()=>{
        this.resetQuestionForm()
      })
    },
    mine(){
      this.centerDialogVisible3 = true
      this.loadMine()
    },
    ifCorrect(){
      this.centerDialogVisible7 = false
      this.$axios.get(this.$httpUrl+"/sns-test-question/ifCorrect?answer="+this.choose).then(res=>res.data).then(res=>{
        if(res.code==200){
          this.marks = this.marks+res.data.question.points
        }
      })
    },
    result(){
      this.centerDialogVisible6 = false
      this.$alert('你的得分为'+this.marks + '/'+ this.sum, '回答结果', {
        confirmButtonText: '返回'
      });
    },
    doSave(){
      this.addForm.createTime = this.times
      this.addForm.creatorId = this.user.id
      this.$axios.post(this.$httpUrl+'/sns-test/save',this.addForm).then(res=>res.data).then(res=>{
        console.log(res)
        if(res.code==200){

          this.$message({
            message: '发布成功！',
            type: 'success'
          });
          this.centerDialogVisible2 = false
          this.loadPost()
          this.resetAddForm()
        }else{
          this.$message({
            message: '发布失败！',
            type: 'error'
          });
        }

      })
    },
    doMod(){
      this.addForm.id = this.testId
      this.addForm.creatorId = this.user.id
      this.addForm.title = this.form.title
      this.addForm.createTime = this.times
      this.addForm.testStatus = this.form.testStatus
      this.$axios.post(this.$httpUrl+'/sns-test/update',this.addForm).then(res=>res.data).then(res=>{
        console.log(res)
        if(res.code==200){

          this.$message({
            message: '修改成功！',
            type: 'success'
          });
          this.centerDialogVisible = false
          this.loadMine()
          this.resetForm()
        }else{
          this.$message({
            message: '修改失败！',
            type: 'error'
          });
        }

      })
    },
    questionSave(){
      this.questionForm.testId = this.testId
      this.$axios.post(this.$httpUrl+'/sns-test-question/save',this.questionForm).then(res=>res.data).then(res=>{
        console.log(res)
        if(res.code==200){
          this.$message({
            message: '添加成功！',
            type: 'success'
          });
          this.centerDialogVisible5 = false
          this.resetQuestionForm()
          this.loadQuestion()
        }else{
          this.$message({
            message: '添加失败！',
            type: 'error'
          });
        }

      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum=1
      this.pageSize=val
      this.loadPost()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum=val
      this.loadPost()
    },
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.mineNum=val
      this.loadMine()
    },
    handleSizeChange2(val) {
      console.log(`每页 ${val} 条`);
      this.mineNum=1
      this.mineSize=val
      this.loadMine()
    },
    handleCurrentChange3(val) {
      console.log(`当前页: ${val}`);
      this.quesNum=val
      this.loadQuestion()
    },
    handleSizeChange3(val) {
      console.log(`每页 ${val} 条`);
      this.quesNum=1
      this.quesSize=val
      this.loadQuestion()
    },
    loadPost(){
      this.$axios.post(this.$httpUrl+'/sns-test/listPage',{
        pageSize:this.pageSize,
        pageNum:this.pageNum,
        param:{
        }
      }).then(res=>res.data).then(res=>{
        console.log(res)
        if(res.code==200){
          this.tableData=res.data
          this.total=res.total
        }else{
          alert('获取数据失败')
        }

      })
    },
    loadMine(){
      this.$axios.post(this.$httpUrl+'/sns-test/listPage',{
        pageSize:this.pageSize,
        pageNum:this.pageNum,
        param:{
          creatorId:this.user.id+''
        }
      }).then(res=>res.data).then(res=>{
        console.log(res)
        if(res.code==200){
          this.mineData=res.data
          this.mineTotal=res.total
        }else{
          alert('获取数据失败')
        }

      })
    },
    loadQuestion(){
      this.$axios.post(this.$httpUrl+'/sns-test-question/listPage',{
        quesSize:this.quesSize,
        quesNum:this.quesNum,
        param:{
          testId:this.testId+''
        }
      }).then(res=>res.data).then(res=>{
        console.log(res)
        if(res.code==200){
          this.questionData=res.data
          this.quesTotal=res.total
        }else{
          alert('获取数据失败')
        }

      })
    },
    getTimes(){
      setInterval(this.getTimesInterval, 1000);
    },
    getTimesInterval:function() {
      const newtime = new Date();
      let year = this.getIncrease(newtime.getFullYear(),4); //获取当前时间的年份
      let month = this.getIncrease(newtime.getMonth() + 1,2); //获取当前时间的月份
      let day = this.getIncrease(newtime.getDate(),2); //获取当前时间的天数
      let hours = this.getIncrease(newtime.getHours(),2); //获取当前时间的小时
      let minutes = this.getIncrease(newtime.getMinutes(),2); //获取当前时间的分数
      let seconds = this.getIncrease(newtime.getSeconds(),2); //获取当前时间的秒数
      //拼接格式化当前时间
      this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
    getIncrease(num, digit) {
      var increase = "";
      for (var i = 0; i < digit; i++) {
        increase += "0";
      }
      return (increase + num).slice(-digit);
    }
  },
  beforeMount() {
    this.loadPost()
    this.getTimes()
    this.init()
  }
}
</script>

<style scoped>

</style>